<template>
	<div class="user-manage">
		<div class="query-form">
			<el-form ref="form" :inline="true" :model="user">
				<el-form-item label="年月">
					<el-date-picker @change="selectChangedTime" v-model="user.yearMonth" type="month" placeholder="选择月">
					</el-date-picker>
				</el-form-item>
        <el-form-item label="公式类型" prop="type">
          <el-select v-model="user.type" @change="selectChangedType">
            <el-option :value="1" label="应发工资"></el-option>
            <el-option :value="2" label="实发工资"></el-option>
          </el-select>
        </el-form-item>
<!--				<el-form-item label="姓名" prop="name">-->
<!--					<el-input v-model="user.name" placeholder="请输入姓名" />-->
<!--				</el-form-item>-->
<!--				<el-form-item label="工号" prop="job_number">-->
<!--					<el-input v-model="user.job_number" placeholder="请输入工号" />-->
<!--				</el-form-item>-->
				<el-form-item>
<!--					<el-button type="primary" @click="handleQuery">查询</el-button>-->
<!--					<el-button @click="handleReset('form')">重置</el-button>-->
          <el-button type="primary" @click="equationQuery">计算工资</el-button>
				</el-form-item>
			</el-form>
<!--			<el-form ref="form" :inline="true" :model="user">-->
<!--				<el-form-item label="工资计算公式">-->
<!--					<el-select v-model="user.equationid" @change="selectChanged" placeholder="请选择用计算参数">-->
<!--						<el-option v-for="item in equationList" :key="item.id" :label="item.name" :value="item.id">-->
<!--						</el-option>-->
<!--					</el-select>-->
<!--				</el-form-item>-->
<!--				<el-form-item>-->
<!--					<el-button type="primary" @click="equationQuery">计算工资</el-button>-->
<!--				</el-form-item>-->
<!--			</el-form>-->
		</div>
		<div class="base-table">
			<div class="action">
			</div>
			<el-table :data="userList" @selection-change="handleSelectionChange">
				<!-- <el-table-column type="selection" width="55" /> -->
				<el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label"
					:width="item.width" :formatter="item.formatter">
				</el-table-column>
				<el-table-column label="操作" width="250">
					<template #default="scope">
						<el-button @click="handleEdit(scope.row)" size="mini">编辑</el-button>
						 <el-button
              type="danger"
              size="mini"
              @click="handleDel(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination class="pagination" background layout="prev, pager, next" :total="pager.total"
				:page-size="pager.pageSize" @current-change="handleCurrentChange" />
		</div>
		<el-dialog title="新增" v-model="showModal">
			<el-form ref="dialogForm" :inline="true" :model="userForm" label-width="100px">

				<el-form-item v-for="item in columns" :label="item.label">
					<el-input v-if="item.label == '类型ID' || item.label == '名称' || item.label == '工号'|| item.label == '应发工资'|| item.label == '实发工资'"
						disabled
						v-model="item.value" :placeholder='"请输入"+item.label' />
						<el-input v-else type="number"
							v-model="item.value" :placeholder='"请输入"+item.label' />
				</el-form-item>

			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="handleClose">取 消</el-button>
					<el-button type="primary" @click="handleSubmit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script>
	import {toRaw} from "vue";

  export default {
		data() {
			return {
				columns: [
            {
						label: "类型ID",
						prop: "id",
						value: ""
					},
					{
						label: "名称",
						prop: "name",
					},
					{
						label: "工号",
						prop: "id_number",
						value: ""
					},
					{
						label: "应发工资",
						prop: "should_pay",
						value: ""
					},
					{
						label: "实发工资",
						prop: "real_wages",
						value: ""
					}
				],
				userList: [],
				user: {
          id:"",
					name: "",
					job_number: "",
					yearMonth: "",
					year: "",
					mouth: "",
          type:1
				},
				equationList: [],
				pager: {
					page: 1,
					pageSize: 10,
				},
				userForm: {},
				showModal: false
			}
		},

		created() {
			let date = new Date();
			this.user.yearMonth = date.getFullYear() + '-' + date.getMonth();
			this.user.year = date.getFullYear();
			this.user.mouth = date.getMonth();
			this.getCloumns();
			this.getUserList();
			// this.getAllList();
		},
		methods: {
			// // 获取用户列表submitForm(formName)
			async getCloumns() {
				let year = this.user.year;
				let month = this.user.mouth;
        if(month < 10){
          month = '0'+month;
        }
				let params = {
					time:year + "-"+ month
				};
				try {
					let list = await this.$api.FindList(params);
          debugger
					this.columns = [];
					var items = [
              {
							label: "类型ID",
							prop: "id",
							value: ""
						},
						{
							label: "名称",
							prop: "name",
						},
						{
							label: "工号",
							prop: "id_number",
							value: ""
						},
						{
							label: "应发工资",
							prop: "should_pay",
							value: ""
						},
						{
							label: "实发工资",
							prop: "real_wages",
							value: ""
						}
					]
					
					for(var j = 0; j < items.length; j++){
						let item = {
							label: "",
							prop: "",
							value: ""
						}
						item.label = items[j].label;
						item.prop = items[j].prop;
						this.columns.push(item);
					}
					for (var i = 0; i < list.length; i++) {
						let item = {
							label: "",
							prop: "",
							value: ""
						}
						item.label = list[i].type;
						item.prop = list[i].name;
						this.columns.push(item);
					}

				} catch (error) {}
			},
			// 获取用户列表
			async getUserList() {
				let users = this.user;
				let pagers = this.pager;
				let params = {
					...users,
					...pagers
				};
				try {
					const list = await this.$api.FindAllSalary(params); //getUserList
          if(list == null){
            this.userList = [];
            this.pager.total = 0;
          }else{
            this.getCloumns();
            this.userList = list.rows;
            this.pager.total = list.records;
          }
				} catch (error) {}
			},
			// 获取公式列表
			async getAllList() {
				try {
					const list = await this.$api.getAllList();
					this.equationList = list;
				} catch (error) {}
			},
			//  计算工资
			async equationQuery(){
				let users = this.user;
				let params = {
					...users
				};
				const list = await this.$api.equationQuery(params);
        if(list == 0){
          this.$message.error("该月工资表不存在");
        }
        if(list == 1){
          this.$message.error("请设置这个月的计算公式");
        }
        if(list == 2){
          this.$message.error("数据库连接错误");
        }
        if(list == 3){
          this.$message.success("计算工资成功");
        }
        if(list == 4){
          this.$message.error("计算工资失败");
        }
				this.getUserList();
			},
			// // 重置查询表单
			handleReset(form) {
				this.user.name = '';
				this.user.job_number = '';
				this.$refs[form].resetFields();
			},
			selectChangedTime(val) {
				if (val == null) {
					return;
				}
				this.user.year = val.getFullYear();
				this.user.mouth = val.getMonth() + 1;
				this.getCloumns();
				this.getUserList();

			},
			// // 分页事件处理
			handleCurrentChange(current){
				this.pager.page = current;
				this.getUserList();
			},
			//  查询事件，获取用户列表
			handleQuery(){
				this.getUserList();
			},

			// 用户弹窗关闭
			handleClose() {
				this.showModal = false;
				this.handleReset("dialogForm");
			},
			// // 用户提交
			async handleSubmit(){
        debugger
				var item = this.columns;
				var MM = {};
				for(var i = 0; i < this.columns.length; i++){
					MM[this.columns[i].prop] = this.columns[i].value;
				}
        let month = this.user.mouth;
        if(month < 10){
          month = '0'+month;
        }
        MM.yearMonth = this.user.year + "-"+ month;
				let res = await this.$api.Modify(MM);
        if(res == 1){
          this.$message.error("该月的工资表不存在");
        }
        if(res == 2){
          this.$message.error("修改失败");
        }
        if(res == 3){
          this.$message.success("增加成功");
        }
        if(res == 4){
          this.$message.error("修改失败");
        }
				this.showModal = false;
				this.handleReset("dialogForm");
				this.getUserList();
			},
			// 用户编辑
			handleEdit(row) {
				this.showModal = true;
				for (var i = 0; i < this.columns.length; i++) {
					var item = row.hasOwnProperty(this.columns[i].prop)
					if (row.hasOwnProperty(this.columns[i].prop)) {
						var u = row[this.columns[i].prop];
						this.columns[i].value = row[this.columns[i].prop];
					}
				}
			},
			selectChanged(value){
			},
      // 用户单个删除
      async handleDel(row){
        this.usr.id = row.id;
        let num = await proxy.$api.DeleteCalculate(this.usr);
        if(num == 1){
          proxy.$message.error("该月的表不存在");
        }
        if(num == 2){
          proxy.$message.success("删除成功");
        }
        if(num == 3){
          proxy.$message.error("删除失败");
        }
        getUserList();
      },
		}
	}
</script>

<style lang="scss">
</style>
